import EZUIKit from 'ezuikit-js'
const NodeStyle = 'width:100%;height:100%;'
export default (app) => {
  app.directive('video', {
    mounted: (el, { value }) => {
      el.id = 'myVideo' + Math.floor(Math.random() * 10000000)
      el.style = NodeStyle
      if (value) Fnezuikit(el, value)
    },
    updated: (el, { value, oldValue }) => {
      if (el.children[0]) el.children[0].style = NodeStyle
      if (value && value != oldValue) Fnezuikit(el, value)
    },
    beforeUnmount: (el) => el.player.stop()
  })
}

const Fnezuikit = (el, { ezopen, token }) => {
  if (!el.player) {
    el.player = new EZUIKit.EZUIKitPlayer({
      id: el.id,
      autoplay: true,
      url: ezopen,
      accessToken: token
    })
  } else {
    el.player.stop().then(() => {
      el.player.play(ezopen)
    })
  }
}
